<template>
    <div>
        <scroller lock-x  @on-scroll-bottom="onScrollBottom" ref="scrollerBottom" :scroll-bottom-offst="50">
            <div>
            <Banner></Banner>
            <panel :list="foodlist" :type="type"></panel>
            <load-more v-show="foodlist.length" tip="loading"></load-more>
            <div style="text-align: center" v-show="foodlist.length==0">暂无食物</div>
            </div>
        </scroller>

    </div>
</template>

<style>
    .banner {
        background: #0bb20c;
    }
</style>

<script>
    import {Panel, Group, Radio,Scroller, Divider, Spinner, XButton,  Cell, LoadMore} from 'vux'
    import Banner from './widget/Banner.vue'
    export default {
        name:'Jinshen',
        components: {
            Banner,
            Panel,
            Group,
            Radio,Scroller, Divider, Spinner, XButton,  Cell, LoadMore
        },
        data () {
            return {
                speciesId:5,//食物分类
                apiUrl: apiUrl,
                apiImgPath:apiImgPath,
                type: '1',
                page:1,
                pulldown:true,
                foodlist: []
            }
        },
        mounted() {
            this.$nextTick(function () {
                this.load(); //概况
            }),
            this.$nextTick(() => {
                this.$refs.scrollerBottom.reset({top: 0})
            })
        },
        methods: {
            //分类
            load() {
                if (this.pulldown == false) {
                    return;
                }
                //禁止加载
                this.pulldown = false;
                this.$http.get(this.apiUrl + 'Food/foods', {
                    params: {
                        'species_id': this.speciesId,
                        'page': this.page
                    }
                }).then(response => {
                    var data = response.data.list;
                    data.forEach((item, index)=> {
                        var food = {
                            src: item.thumb ? this.apiImgPath + item.thumb : '',
                            title: item.name,
                            desc: item.description,
                            url: '/Food/' + item.id
                        };
                        this.foodlist.push(food);
                    });
                    //处理页面和可加载状态
                    this.pulldown = true;
                    this.page++;
                    this.$nextTick(() => {
                        this.$refs.scrollerBottom.reset()
                    })
//                    this.currentPage = this.$route.params.page ? this.$route.params.page : 1;
                }, response => {
                    this.$message.error('加载失败');
                    console.log(response);
                });


            },
            onScrollBottom () {
                this.load()
            },
            onScroll (pos) {
                this.scrollTop = pos.top
            },
            changeList () {
                this.$nextTick(() => {
                    this.$refs.scroller.reset({
                        top: 0
                    })
                })
            }
        }

    }
</script>